import React, { lazy, useCallback, useEffect, useState } from 'react';
import { Button, Layout, Menu, Popover } from 'antd';
import '../css/Home.css';
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import Bookmanagement from './Bookmanagement';
import { useNavigate } from 'react-router-dom';
import getCookieByKey from '../utils/cookieUtil';
import cookie from 'react-cookies';

const { Header, Content, Sider } = Layout;
type MenuItem = Required<MenuProps>['items'][number];
function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
  type?: 'group',
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
    type,
  } as MenuItem;
}

const items: MenuProps['items'] = [
  getItem('图书管理', 'sub1', <MailOutlined />, [
    // getItem('Item 1', 'g1', null, [getItem('Option 1', '1'), getItem('Option 2', '2')], 'group'),
    getItem('书籍管理', '/home'),
    getItem('分类管理', '/sort'),
  ]),

  getItem('借还', 'sub2', <AppstoreOutlined />, [
    getItem('用户借还', '/borrowbooks'),
    // getItem('Option 6', '6'),
    // getItem('Submenu', 'sub3', null, [getItem('Option 7', '7'), getItem('Option 8', '8')]),
  ]),

  getItem('人员管理', 'sub4', <SettingOutlined />, [
    getItem('管理员', '/adminlist'),
    getItem('用户', '/userlist'),
  ]),
];



function Home() {

  const content = (
    <div>
      <Button type="primary" onClick={loginout}>
        退出登录
      </Button>
    </div>
  );
  const [DynamicModule, setDynamicModule] = useState("div");
  const [cook, setcook] = useState<any>('');
  const navigate = useNavigate();
  //判断登录
  // useEffect(() => {
  //   check();
  // }, []);
  // function check() {
  //   let no = getCookieByKey("no");
  //   console.log(no);
  //   if (!no) {//no没有值 ，说明没有登陆过
  //     navigate({ pathname: "/" });
  //   }
  // }
  useEffect(() => {
    const timer = setTimeout(() => {
      getcook()
      // console.log('111');
    }, 1000)
    return () => clearTimeout(timer)
  }, [cook]);
  function getcook() {
    setcook(cookie.load('userinfo'))
    // console.log(cook,'111',cookie.load('userinfo'));
    if(!cookie.load('userinfo')){
      navigate({ pathname: "/" });
    }
  }


  function loginout() {
    cookie.remove('userinfo')
    // navigate({ pathname: "/" });
  }

  const [ipathname, setipathname] = useState<any>('/bookmanagement');
  const onClick: MenuProps['onClick'] = e => {
    // console.log('click ', e);
    navigate({ pathname: e.key })
    setipathname(e.key)
  };


  return (
    <div>
      <Layout>
        <Sider
          breakpoint="lg"
          collapsedWidth="0"
          onBreakpoint={broken => {
            // console.log(broken);
          }}
          onCollapse={(collapsed, type) => {
            // console.log(collapsed, type);
          }}
        >
          <div className="logo" >图书管理系统</div>
          <Menu
            onClick={onClick}
            style={{ width: 200 }}
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            mode="inline"
            theme="dark"
            items={items}

          />

        </Sider>
        <Layout>
          <Header className="site-layout-sub-header-background" style={{ padding: 0 }} >
            <span className='username'>
              <Popover content={content} trigger="hover">
                <Button>{cook.username}</Button>
              </Popover>
            </span>
          </Header>
          <Content style={{ margin: '24px 16px 0' }}>
            <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
              <Bookmanagement />
            </div>
          </Content>

        </Layout>
      </Layout>
    </div>
  );

}

export default Home;
